<template>

  <el-dialog  :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="500px">
 <div class="preview-survey-phone">
  <iframe src="https://qyb.wxb.com/publish/survey?id=5424982-8629&preview=1"></iframe>
 </div>
    <div class="code">
      请扫码预览
      <canvas ref="qrcodeCanvas" width="150" height="150"></canvas>
    </div>
  </el-dialog>
</template>

<script>
import QRCode from 'qrcode'
  export default {
    name: 'sendQuestionnaireSet',
    data() {
      return {
      }
    },
    created() {
    },
    mounted() {
      this.$nextTick(()=>{
        this.generateQRCode('https://www.baidu.com');
      },)

    },
    watch: {},
    methods: {
      generateQRCode(url) {
        const canvas = this.$refs.qrcodeCanvas
        QRCode.toCanvas(canvas, url, error => {
          if (error) console.error(error)
        })
      },
      handleCloseDialog() {
        this.$emit('update:visableIf', false);
      }
    }
  }
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  height: auto !important;
}
  .footer-btn {
    display: flex;
    justify-content: flex-end;
  }
::v-deep .el-dialog {
  background: none;
  box-shadow:none;
  .el-dialog__header {
    border: none;
  }
}
.preview-survey-phone {
  background: url(https://s.yezgea02.com/r/BNtaGA/phone.png);
  height: 560px;
  width: 275px;
  background-size: contain;
  position: relative;
  iframe {
    border: 0;
    position: absolute;
    width: 335px;
    top: -27px;
    height: 600px;
    left: -30px;
    transform: scale(.7);
  }
}
.code {
  position: absolute;
  left: 300px;
  bottom: 100px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-top: 10px;
}
.el-dialog{
  position: relative;
}
::v-deep .el-dialog__headerbtn {
  font-size: 20px;

}
::v-deep .el-dialog__close {
  color: #fff;
  position: relative;
  left: -100px;
}
</style>
